// 0. 获取元素
const search = document.querySelector('input')
const box = document.querySelector('.search_res')

// 1. 给 search 绑定表单输入事件
search.oninput = function () {
    // 2. 拿到文本框输入的内容
    const text = this.value

    // 3. 根据 text 关键字请求数据了
    // 3-1. 创建一个 script 标签
    const script = document.createElement('script')
    // 3-2. 手动设置 script 标签的 src 属性
    // 设置 script 标签的原生属性 src
    script.src = 'https://www.baidu.com/sugrec?pre=1&p=3&ie=utf-8&json=1&prod=pc&from=pc_web&sugsid=34099,33970,34004,33855,33607,26350,22159&wd=' + text + '&req=2&csor=5&pwd=aiqiyi&cb=fn&_=1623047595324'
    // 3-3. 把这个 script 标签插入到 body 内部
    document.body.appendChild(script)
    // 3-4. script 标签的下场
    // 需要他的目的, 是为了利用 src 发送一个请求, 回来以后会执行 js 代码
    // 请求发送出去以后, 就没有用了
    script.remove()
}

// 4. 需要在全局准备一个 fn 函数
function fn(res) {
        // res 就是后端返回给我的数据
        // 我就根据 res 去渲染页面
        // console.log(res)

        // 通过判断res 内是否有 g 这个数据
        // 来决定我是否渲染
        if (!res.g) {
        // 代码能执行到这里, 表示 res 内没有 g 这个数据
        // 让 ul 隐藏
            box.style.display = 'none'
            // 直接 return
        return
    }

    // 代码能来到这里
    // 说明 res 内的 g 是一个数组
    // 那么就循环数组渲染到 box 内部
    let str = ''
    res.g.forEach(item => {
        str += `<li>${ item.q }</li>`
    })
    box.innerHTML = str

    // 让 box 显示
    box.style.display = 'block'
}